<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">





  <link rel="alternate" href="/atom.xml" title="renhao" type="application/atom+xml">






<meta name="description" content="本文总结下前端面试中常被问到的开放性问题。">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试总结 开放性问题">
<meta property="og:url" content="https://huangrenhao.gitee.io/2020/09/24/open-interview/index.html">
<meta property="og:site_name" content="renhao">
<meta property="og:description" content="本文总结下前端面试中常被问到的开放性问题。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2020-11-10T01:41:50.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端面试总结 开放性问题">
<meta name="twitter:description" content="本文总结下前端面试中常被问到的开放性问题。">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://huangrenhao.gitee.io/2020/09/24/open-interview/">





  <title>前端面试总结 开放性问题 | renhao</title>
  








<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>

<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">
  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">renhao</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://huangrenhao.gitee.io/2020/09/24/open-interview/">

    <span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
      <meta itemprop="name" content="renhao">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="renhao">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">前端面试总结 开放性问题</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-09-24T10:08:14+08:00">
                2020-09-24
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                  <a href="/categories/interview/" itemprop="url" rel="index">
                    <span itemprop="name">interview</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2020/09/24/open-interview/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count valine-comment-count" data-xid="/2020/09/24/open-interview/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  6.6k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  23
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>本文总结下前端面试中常被问到的开放性问题。 <a id="more"></a></p>
<h3 id="简述对前端工程化的理解（300字以内）"><a href="#简述对前端工程化的理解（300字以内）" class="headerlink" title="简述对前端工程化的理解（300字以内）"></a>简述对前端工程化的理解（300字以内）</h3><p>前端的发展迅速，前端开发也不是掌握 html、css、js 就可以了，现在更多的是关注模块化、组件化、规范化、自动化，利用一些框架和工具来提升开发效率，简单的说就是将一些重复繁重的工作交由自动化工具进行，如创建配置初始项目文件结构和基本文件、修改代码查看结果、检验 js 是否符合规范等。</p>
<p>模块化就是将一个大文件拆分成相互以来的小文件，再进行统一的拼装和加载（只有这样才能多人协作）</p>
<ul>
<li>js 的模块化：es6 之前 js 没有模块系统，使用 commonjs、amd、cmd，es6 在语言层面定义了模块系统，模块的打包和加载可以使用 webpack+bable。</li>
<li>css 的模块化：sass、less 等预处理器实现了 css 的文件拆分，但没有解决 css 选择器的全局污染问题，导入一个 css 模块后已存在的样式有被覆盖的风险，虽然重写样式是 css 的一个优点但并不利于多人协作。避免全局选择器冲突可以使用 bem/bootstrap 风格（弱约束），选择器随着项目的增长变多越多越复杂，社区解决方案：css in js、css modules，css in js 彻底抛弃 css ，使用 js、json来写样式，不能利用现有的 css 技术而且处理伪类困难。css module 让 js 管理，vue 中的 scoped style 是其中一种。</li>
<li>资源的模块化：webpack，模块加载理念（所有的资源都可以并应该模块化） ，所有 css 和图片等资源的依赖关系统一走 js 路线</li>
</ul>
<p>组件化：模块化是在文件层面上对代码或资源的拆分，而组件化是在设计层面上对 UI 的拆分，组件就是从 UI 拆分下来的每个包含模板（HTML）+样式（CSS）+逻辑（JS）功能完备的结构单元。分治思想。</p>
<ul>
<li>组件化开发优点：降低系统各个功能的耦合，降低代码量和维护消耗，降低开发复杂度，提升开发效率。</li>
<li>组件化需要考虑的地方：<ul>
<li>组件的拆分力度，单个组件不宜有多个不同类型的功能</li>
<li>可复用性，需要考察业务模块之间的相似度</li>
<li>组件参数验证</li>
</ul>
</li>
</ul>
<p>规范化：目录结构、编码、前后端接口、文档、组件管理、git分支、commit描述等</p>
<p>自动化：任何简单机械的重复劳动交由机器完成，即自动化工具</p>
<h3 id="什么是函数式编程"><a href="#什么是函数式编程" class="headerlink" title="什么是函数式编程"></a>什么是函数式编程</h3><ul>
<li>与面向对象编程、过程式编程相区别</li>
<li>函数最重要，强调将计算过程分解为可复用的函数，纯的、无副作用的函数才是合格的</li>
</ul>
<p>函数式编程的一个特点是允许把函数本身作为参数传入另一个函数，还允许返回一个函数</p>
<p><a href="ruanyifeng.com/blog/2017/02/fp-tutorial.html">参考：阮一峰函数式编程</a></p>
<h3 id="前端最近几年的新技术，前端前沿技术"><a href="#前端最近几年的新技术，前端前沿技术" class="headerlink" title="前端最近几年的新技术，前端前沿技术"></a>前端最近几年的新技术，前端前沿技术</h3><ul>
<li><p>vue 3.0</p>
<ul>
<li><p>更快：重写 virtual dom，更多编译时提醒减少 runtime 开销、基于 proxy</p>
</li>
<li><p>更小</p>
</li>
<li>更易维护</li>
<li>开发者更轻松：支持 ie11</li>
</ul>
</li>
<li><p>flutter</p>
<p>Google 移动 sdk，用于在极短时间内在 Android 和 iOS 平台上创建高质量的原生体验。</p>
<p>RN 是使用JS代码调用系统的原生控件，最高支持 60fps。 Flutter 不使用系统的原生控件， Flutter 基于GPU渲染，所以确保了高性能，最高支持120fps，甚至不输原生。 Flutter只需要维护一套UI 代码：Flutter 在IOS和Android 是一套 UI 风格组件，所以 Flutter 需要做很少适配，因为上层只有一套UI代码。RN是同一套代码在IOS和Android显示不同的风格，需要适配维护两个代码库。 相同点： 和RN类似，基于组件开发Weight，一切皆组件。</p>
</li>
<li><p>Serverless</p>
<p>从字面上推断词意即为“少服务器的，亦或是无服务器的”。当然这并非指应用架构中是没有服务器资源的，而是通过 Serverless 这种服务形态，用户在使用对应的服务时，不需要关心或较少关心服务器的硬件资源、软件资源、稳定性等等，这些通常已经由云计算厂商提供设施、服务和 SLA 保障，完全托管给云计算厂商。而用户只需要专注自己应用代码本身，上传执行函数到相应云计算平台，按照函数运行的时长按量付费即可。当前比较成熟的 Serverless 云产品主要有 Amazon Lambda、Google Cloud Function、Azure Function、AliCloud Function Compute。</p>
<p>Serverless 其实是通过事件驱动的，当一个任务被触发时，比如 HTTP 请求，API Gateway 接受请求、解析和认证，传递对应参数给云函数平台，平台中执行对应回调函数，配合 DB、MQ 等 BaaS 服务在特定容器中完成计算，最终将结果返回给用户。函数执行完成后，一般会被 FaaS 平台销毁，释放对应容器，等待下一个函数运行。</p>
<p>缺陷：</p>
<ul>
<li><p><strong>云厂商强绑定</strong> 当你决定使用公有云的 Serverless 产品时，它们常常会和厂商的其他云产品相绑定，如对象存储、消息等等，这意味你需要同时开通其他的服务，将导致你的应用与平台强绑定，迁移成本剧增。</p>
</li>
<li><p><strong>不适合长时间任务</strong> 云函数平台会限制函数执行时间，如阿里云 Function Compute 最大执行时长为 10 min，如果你的任务时间超长，那么你需要拆分编排你的函数执行流程，并在一个函数执行结束时唤起另一个函数执行。这将增加编码的复杂度，而且花费上可能高于购买一个长时间运行的实例。</p>
</li>
<li><p><strong>冷启动时间</strong> 函数运行时，执行容器和环境需要一个准备的时间，尤其是第一次启动时时间可能会较长。对一个 HTTP 请求来讲，可能会带来响应时延的增加，产生性能毛刺。</p>
</li>
<li><p><strong>调试与测试</strong> 由于本地环境和平台运行环境的差异性，开发者需要不断调整代码，打印日志，并提交到函数平台运行测试，会带来一些开发成本和产生一些费用。</p>
</li>
</ul>
<p>应用场景：</p>
<ul>
<li><p><strong>定时任务</strong> 通过时间触发对应的函数任务，完成开发者业务逻辑的处理。</p>
</li>
<li><p><strong>数据加工</strong> 通过事驱动件机制，在特定的条件下触发，对系统的日志进行整合，或者对多媒体文件进行加工等等。</p>
</li>
<li><p><strong>低频请求</strong> 用户可以按照频次付费，而无需构建一个应用来应对这些必要的但是量小的请求。</p>
</li>
<li><p><strong>IoT</strong> 物联网场景下，大部分是用户对设备的操控，用户对时延的容忍度较高，也是典型的事件触发且低频场景。</p>
</li>
<li><p><strong>认知计算</strong> 适用于某些 AI 场景，如聊天机器人</p>
</li>
</ul>
</li>
</ul>
<h3 id="多人开发配合的注意"><a href="#多人开发配合的注意" class="headerlink" title="多人开发配合的注意"></a>多人开发配合的注意</h3><h3 id="设计模式了解哪些"><a href="#设计模式了解哪些" class="headerlink" title="设计模式了解哪些"></a>设计模式了解哪些</h3><ul>
<li><p>单例模式：确保一个类仅有一个实例，并提供一个访问它的全局访问点。一般我们是这样实现单例的，用一个变量来标志当前的类已经创建过对象，如果下次获取当前类的实例时，直接返回之前创建的对象即可</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">var</span> singleton <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span> fn <span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> result<span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> result <span class="token operator">||</span> <span class="token punctuation">(</span> result <span class="token operator">=</span> fn <span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">,</span> arguments <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> createMask <span class="token operator">=</span> <span class="token function">singleton</span><span class="token punctuation">(</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre>
</li>
<li><p>工厂模式：工厂就是把成员对象的创建工作转交给一个外部对象，好处在于消除对象之间的耦合(何为耦合？就是相互影响)。通过使用工厂方法而不是new关键字及具体类，可以把所有实例化的代码都集中在一个位置，有助于创建模块化的代码，这才是工厂模式的目的和优势。</p>
<blockquote>
<p>参考 js 创建对象中的工厂模式</p>
</blockquote>
</li>
<li><p>策略模式：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。使用策略模式重构代码，可以消除程序中大片的条件分支语句。</p>
<pre class=" language-js"><code class="language-js">  <span class="token keyword">var</span> strategies <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token string">'S'</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>salary<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> salary <span class="token operator">*</span> <span class="token number">4</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token string">'A'</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>salary<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> salary <span class="token operator">*</span> <span class="token number">3</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token string">'B'</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>salary<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> salary <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">var</span> calculateBonus <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>level<span class="token punctuation">,</span> salary<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> strategies<span class="token punctuation">[</span>level<span class="token punctuation">]</span><span class="token punctuation">(</span>salary<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">calculateBonus</span><span class="token punctuation">(</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token number">10000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">// 普通模式下需要在 calculateBonus 中进行条件判断 if-else 或 switch</span>
</code></pre>
</li>
<li><p>模板方法模式：由二部分组成，第一部分是抽象父类，第二部分是具体实现的子类，一般的情况下是抽象父类封装了子类的算法框架，包括实现一些公共方法及封装子类中所有方法的执行顺序，子类可以继承这个父类，并且可以在子类中重写父类的方法，从而实现自己的业务逻辑。</p>
</li>
<li><p>职责链模式：职责链，一系列可能处理请求的对象被连接成一条链，请求在这些对象之间依次传递，直到遇到一个可以处理它的对象，减少了很多重复代码。</p>
</li>
<li><p>发布订阅者模式/观察者模式</p>
</li>
<li><p>代理模式：把对一个对象的访问交给另一个代理对象来操作</p>
</li>
</ul>
<blockquote>
<p><a href="https://blog.csdn.net/Tracy_frog/article/details/88638619" target="_blank" rel="noopener">参考：csdn前端面试题设计模式</a></p>
</blockquote>
<h3 id="发布-订阅和观察者模式的区别？"><a href="#发布-订阅和观察者模式的区别？" class="headerlink" title="发布/订阅和观察者模式的区别？"></a><a href="https://blog.csdn.net/qq_39877296/article/details/79103206" target="_blank" rel="noopener">发布/订阅和观察者模式的区别？</a></h3><p>​    两种模式都存在订阅者和发布者（具体观察者可认为是订阅者、具体目标可认为是发布者），但是观察者模式是由具体目标调度的，而发布/订阅模式是统一由调度中心调的，所以观察者模式的订阅者与发布者之间是存在依赖的，而发布/订阅模式则不会。</p>
<h3 id="如何实现关键词浮动框，-如鼠标移动到特定文字上，需要显示详细信息的对话框浮动在文字上方"><a href="#如何实现关键词浮动框，-如鼠标移动到特定文字上，需要显示详细信息的对话框浮动在文字上方" class="headerlink" title="如何实现关键词浮动框， 如鼠标移动到特定文字上，需要显示详细信息的对话框浮动在文字上方"></a>如何实现关键词浮动框， 如鼠标移动到特定文字上，需要显示详细信息的对话框浮动在文字上方</h3><ul>
<li>html 特性：每个标签都有一个 title 属性。当鼠标 hover 在该标签内容上时，浏览器展示出该标签的 title 内容，鼠标移走后内容消失。可以通过属性选择器 [title] 来更改其样式</li>
<li>css 伪类：正常情况下详情信息对话框 <code>display:none</code>，设置目标元素 <code>:hover</code> 时更改详情信息 <code>display</code> 属性。</li>
<li>js onmouseover、onmouseout事件：通过 js 事件控制 html 或者 css （添加元素、设置元素的渲染）</li>
</ul>
<h3 id="如何看待互联网寒冬？对自己的职业生涯规划和技术规划（未来几年的期望）？"><a href="#如何看待互联网寒冬？对自己的职业生涯规划和技术规划（未来几年的期望）？" class="headerlink" title="如何看待互联网寒冬？对自己的职业生涯规划和技术规划（未来几年的期望）？"></a>如何看待互联网寒冬？对自己的职业生涯规划和技术规划（未来几年的期望）？</h3><p>带团队</p>
<h3 id="前端有使用过-哪些数据结构"><a href="#前端有使用过-哪些数据结构" class="headerlink" title="前端有使用过 哪些数据结构"></a>前端有使用过 哪些数据结构</h3><h3 id="微前端方案"><a href="#微前端方案" class="headerlink" title="微前端方案"></a>微前端方案</h3><p>iframe的缺点和优点：</p>
<h3 id="Vue-和-原生js、jquery-的区别"><a href="#Vue-和-原生js、jquery-的区别" class="headerlink" title="Vue 和 原生js、jquery 的区别"></a>Vue 和 原生js、jquery 的区别</h3><p>jquery 只是对原生 js 的 api 选择器进行了封装，便于操作 dom，本质上还是操作 dom 实现逻辑，数据和界面还是连接在一起；</p>
<p>vue 采用 mvvm 模型，将数据层和视图层完全分离开，采用数据驱动的思想，主要操作的是数据而不是操作 DOM</p>
<h3 id="作为一个前端工程师应该掌握哪些技术"><a href="#作为一个前端工程师应该掌握哪些技术" class="headerlink" title="作为一个前端工程师应该掌握哪些技术"></a>作为一个前端工程师应该掌握哪些技术</h3><p>基础： html、css、js、计算机基础、浏览器知识渲染原理、网络</p>
<p>框架：react、vue，后端： node、mysql</p>
<p>工具：webpack 等</p>
<p>了解前沿前端技术，如微前端、serverless、服务端渲染</p>
<p>还可以延伸，如自我学习能力、对于加强业务认知的想法，如何去了解业务、对产运同学的业务操作或者业务理解有无认知，能不能理解其中的术语以及动作，并且可以提出自己的想法；团队协作能力，如何有效沟通，如有无必要开会，开会注意事项等，对团队内业务有无深入认知，能不能给团队提供支持等。</p>
<blockquote>
<ul>
<li>网络传输知识，抓包分析，流量监测，传输格式等等等等</li>
<li>浏览器知识，内核类型，渲染原理，内存释放，cookie，缓存，web-worker等等等等</li>
<li>接下来才是html规定浏览器的内容，css规定浏览器的布局，JavaScript规定浏览器行为</li>
<li>服务器知识，你的网页要被访问到不得放到服务器上，如何开端口，如何开代理，如何缓存静态文件等等等等</li>
<li>如何带团队</li>
</ul>
</blockquote>
<h3 id="服务端渲染"><a href="#服务端渲染" class="headerlink" title="服务端渲染"></a>服务端渲染</h3><p>简单来说使用服务端渲染就是在请求页面时返回的 body 中有html结构，没有的情况下body为空，之后执行 js 将 html 结构注入 body 中，结合 css 显示出来</p>
<p>优势：</p>
<ul>
<li>利于 seo（搜索引擎优化），使用 React 、Vue 等框架后页面主要元素都是在 runtime 时间完成，供爬虫抓取分析的内容大大减少</li>
<li>利于首屏渲染：渲染内容变为中间层（如 node ）返回的 html 字符串，不依赖于 js 文件（大型单页应用可能打包后 js 文件体积较大）</li>
</ul>
<p>局限：</p>
<ul>
<li>服务端压力较大：高并发情况会占用大量服务端资源</li>
<li>开发条件受限：如 React 中的生命周期钩子函数只会执行到 componentDidMount 之前</li>
</ul>
<p>实现：</p>
<blockquote>
<p>vue-server-renderer： 调用  renderer 实例的 renderToString 方法可以将Vue实例转化为渲染后的字符串</p>
</blockquote>
<p>对于 router 的拆分（路由为基础进行 chunk 代码拆分返回）： 在 router.onReady 中（可能的异步组件或者异步钩子函数解析完成）判断 matchedComponents 长度（目标位置或者当前路由匹配数组），只有长度不为 0 时才创建。核心要点是路由异步组件全部准备就绪后渲染返回。</p>
<blockquote>
<p>参考：<a href="https://www.jianshu.com/p/10b6074d772c" target="_blank" rel="noopener">浅谈服务端渲染</a>， <a href="https://www.cnblogs.com/tugenhua0707/p/11048465.html" target="_blank" rel="noopener">webpack,vue,koa 实现服务端渲染</a></p>
</blockquote>
<h3 id="请简述一下你在前端不同方向-WebGL、小程序、WebAssembly、跨端等-所做的技术尝试（300字以内）"><a href="#请简述一下你在前端不同方向-WebGL、小程序、WebAssembly、跨端等-所做的技术尝试（300字以内）" class="headerlink" title="请简述一下你在前端不同方向(WebGL、小程序、WebAssembly、跨端等)所做的技术尝试（300字以内）"></a>请简述一下你在前端不同方向(WebGL、小程序、WebAssembly、跨端等)所做的技术尝试（300字以内）</h3><p>在美团点评实习时，有参与微前端实现过程，主要负责组件动态化方案中的样式隔离，同时对组件动态化方案有了一定认知。</p>
<h3 id="git-命令"><a href="#git-命令" class="headerlink" title="git 命令"></a>git 命令</h3><ul>
<li><p>git rebase：变基，可以使用 <code>rebase</code> 命令将提交到某一分支上的所有修改都移至另一分支上。无论是通过变基，还是通过三方合并<code>merge</code>，整合的最终结果所指向的快照始终是一样的，只不过提交历史不同罢了。 变基是将一系列提交按照原有次序依次应用到另一分支上（可能一些开发过程中的提交在新分支上就会看不到了），而合并是把最终结果合在一起。</p>
<p>可以变基拉取远程代码，在 git pull 时可能有某个人 git push -f 改变了以前的 commit 记录，如 git commit -amend，这个时候直接拉取会默认进行 git merge</p>
<blockquote>
<p><a href="[https://git-scm.com/book/zh/v2/Git-%E5%88%86%E6%94%AF-%E5%8F%98%E5%9F%BA](https://git-scm.com/book/zh/v2/Git-分支-变基">参考</a>)</p>
</blockquote>
</li>
<li><p>git stash：将未完成的修改保存到一个栈上， 可以在任何时候重新应用这些改动（甚至在不同的分支上）</p>
<p>git stash push 和 git stash apply</p>
</li>
<li><p>git commit –amend：忘了暂存某些需要修改时使用</p>
<p>git reset Head <file> 取消已暂存文件的暂存状态，<strong>git reset –hard 目标版本号</strong> 还可以用来进行版本<strong>回退</strong>（注意远程仓库回退需要使用 git push -f）</file></p>
<p>git revert 可以用来撤销之前的某一版本，同时可以保留该目标版本后面的版本，记录整个版本变动流程。使用时只需 <code>git revert -n &lt;不要的版本号&gt;</code>即可</p>
<p>git checkout – <file> 将文件回复上次提交的样子</file></p>
<blockquote>
<p><a href="[https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E6%92%A4%E6%B6%88%E6%93%8D%E4%BD%9C](https://git-scm.com/book/zh/v2/Git-基础-撤消操作">参考</a>)</p>
</blockquote>
</li>
<li><p>git pull 命令从中央存储库中提取特定分支的新更改或提交，并更新本地存储库中的目标分支。git fetch 也用于相同的目的，但它的工作方式略有不同。当你执行 git fetch 时，它会从所需的分支中提取所有新提交，并将其存储在本地存储库中的新分支中。如果要在目标分支中反映这些更改，必须在 git fetch 之后执行git merge。只有在对目标分支和获取的分支进行合并后才会更新目标分支。</p>
</li>
<li><p>git flow：常见几个分支</p>
<ul>
<li>production：master 分支</li>
<li>develop：主开发分支</li>
<li>feature：开发一个新功能，开发完毕后合并到 develop 进入下一个 release</li>
<li>release：需要发布一个新 release 时，基于 develop 分支创建一个新 release，完成后合并到 master 和 develop</li>
<li>hotfix：在 production 发现 bug 时需要创建一个 hotfix，完成后合并到 master 和 develop</li>
</ul>
<blockquote>
<p><a href="https://www.jianshu.com/p/41910dc6ef29" target="_blank" rel="noopener">git flow 的使用方法</a></p>
</blockquote>
</li>
</ul>
<h3 id="怎么做需求分析"><a href="#怎么做需求分析" class="headerlink" title="怎么做需求分析"></a>怎么做需求分析</h3><ul>
<li>按照功能项进行拆分</li>
<li>按照工作流步骤拆分：识别出操作步骤、每个步骤该做的事、按照步骤拆解需求。如用户登录，可以分为用户获取随机盐、密码加密上传、信息比对登录跳转</li>
<li>根据业务规则拆分：分析业务规则、按照业务规则拆分成小需求。如用户登录，可以分为信息上传校验、登录成功或失败</li>
<li>从“简单”到“复杂”拆分：识别最简单核心的业务场景、讨论复杂的业务场景（和正常不一样）、按照从简单到复杂的方式拆分需求。如用户登录，正常的逻辑（用户成功登录并跳转）、异常逻辑（登录失败、账号密码错误、信息提示、重定向页面等）</li>
</ul>
<p>需求拆分程度：拆的过细投入太大，过粗不起作用。拆分的目的是更快速地流动、更快的得到反馈，至少要做到独立可测试、周期较短。</p>
<blockquote>
<p><a href="https://www.jianshu.com/p/72b17d9fdf70" target="_blank" rel="noopener">参考 如何需求拆解</a></p>
</blockquote>
<h3 id="对前端架构的理解"><a href="#对前端架构的理解" class="headerlink" title="对前端架构的理解"></a>对前端架构的理解</h3><ul>
<li>规则：开发规则、命名规则、git 管理、代码层面（公共函数、模块划分、路由等）</li>
<li>选择的技术：模块化、框架、js 库</li>
<li>开发环境和打包发布工具选择等</li>
</ul>
<h3 id="尾递归调用优化"><a href="#尾递归调用优化" class="headerlink" title="尾递归调用优化"></a>尾递归调用优化</h3><p>尾递归调用就是把上一次计算的结果通过参数传递，一般的表现形式是在 return 语句中使用递归调用，并将结果作为参数</p>
<p>如计算 n 的阶乘中</p>
<pre><code>function cal_opt(n, sub=1) {
      if (n&lt;2) return sub
      return cal_opt(n-1, n*sub)
}
</code></pre><p>通过尾递归调用优化可以避免重复计算中间结果</p>
<h2 id="场景题"><a href="#场景题" class="headerlink" title="场景题"></a>场景题</h2><h4 id="腾讯微信支付"><a href="#腾讯微信支付" class="headerlink" title="腾讯微信支付"></a>腾讯微信支付</h4><ul>
<li><p>输入到登录的全过程</p>
<blockquote>
<p>数据库设计、网络、状态保持</p>
</blockquote>
</li>
<li><p>微信扫码支付全过程</p>
<blockquote>
<p>整个流程？参与方？安全隐患？黑客攻击的地方？如何防范</p>
</blockquote>
</li>
</ul>
<h4 id="网易有道"><a href="#网易有道" class="headerlink" title="网易有道"></a>网易有道</h4><blockquote>
<p><a href="https://juejin.im/post/6862855292577644552#comment" target="_blank" rel="noopener">来源</a></p>
</blockquote>
<ul>
<li><p>直播中动画</p>
<blockquote>
<p>定时动画、动画同步</p>
</blockquote>
<p>比如直播的场景，某个老师点击某个地方，如U盘，这个时候需要展示U盘的动画效果，或者老师点击这个电脑屏幕，你需要展示一个小电脑的动画效果，即需要在特定的时间点，完成特定的动画效果</p>
<p>假设我们可以获取到某个时间点的动画，当网络拥塞时，比如有延迟的时候，出现卡顿的效果，原本需要5秒播放完的，可能需要7秒，如何解决动画同步？</p>
</li>
<li><p>输入框输入</p>
<p>在一个输入框输入内容，怎么更加高效的去提示用户你输入的信息，举个例子，你输入天猫，那么对应的提示信息是天猫商城，天猫集团，这个信息如何最快的获取，有没有不需要发请求的方式来实现？</p>
<blockquote>
<p>如何设计本地数据库？怎么存储呢，key-value 的形式对吗？需要考虑的点有哪些：如前缀相同</p>
</blockquote>
<p>可以考虑以字典树（Trie 树）的方式来存储数据，利用串的公共前缀，节约存储空间。字典树的基本特征：</p>
<ul>
<li>根节点不包含字符，除根节点外每个节点都只包含一个字符</li>
<li>从根节点到某一节点，路径上经过的字符连接起来，就是对应的字符串</li>
<li>每个节点的所有子节点包含的字符都不相同</li>
</ul>
<p>与哈希表相比，trie 树在存储具有相同前缀的键时可以使用较少的空间，虽然哈希表可以在 o(1) 的时间内寻找键值，但可能随着大小增加，出现大量冲突，时间复杂度可能会增大的 o(n)，并且哈希表无法高效找到具有统一前缀的全部键值。trie 树需要的时间复杂度为 o(m)，m为键长。</p>
<p><a href="https://leetcode-cn.com/problems/implement-trie-prefix-tree/solution/shi-xian-trie-qian-zhui-shu-by-leetcode/" target="_blank" rel="noopener">实现参考</a>，用一个数组来存储其子节点，用当前字符-‘a’ 作为下标存储子节点，没有直接存储字符，查找时根据被查找的字符-‘a’ 的索引下有无 node 来判断是否存在</p>
</li>
<li><p>文件内容对比</p>
<p>完成Git Diff算法，比较两个文件的不同，这个过程怎么去比较的？两个文件不同的位置如何标注出来</p>
<blockquote>
<p>最长公共子序列</p>
</blockquote>
<ul>
<li><p>寻找 diff 可以表示为图搜索，构造一张图，横轴为源字符串，纵轴为待查找串，图中向右表示删除，向下表示新增，对角线表示原内容保持不动。则最短最直观的 diff 需要满足路劲长度最短（对角线不算）、先右再下（右删除下新增）。可以用递归回溯，找到路径长度最短并且每一步 x-y </p>
</li>
<li><p>动态规划：求 <code>X = &lt;x1, x2, ..., xm&gt;</code> 与 <code>Y = &lt;y1,y2,...,ym&gt;</code> 的LCS时，需要求解一个或两个子问题，如果 xm = yn，则求解 Xm-1 与 Yn-1 的 LCS，将 xm，yn 加到这个 LCS 的末尾；如果 xm != yn，则求解 Xm-1 与 Y 的一个 LCS 和 X 与 Yn-1 的 LCS，两个 LCS 较长者即为 X 和 Y 的 LCS</p>
<pre><code>LCS_LENGTH(X,Y)
m = X.length
n = Y.length
let b[1..m,1..n] and c[0..m,0..n] be new tables
for i=1 to m
    c[i,0] = 0
for j=0 to n
    c[0,j] = 0
for i=1 to m
    for j=1 to n
        if xi == yj
            c[i,j] = c[i-1,j-1]+1
            b[i,j] = &#39;对角线&#39;
        else if c[i-1,j] &gt;= c[i, j-1]
            c[i,j] = c[i-1,j]
            b[i,j] = &#39;向下&#39;
        else 
            c[i,j] = c[i,j-1]
            b[i,j] = &#39;向右&#39;
return c and b
</code></pre><p>c[m,n]保存了 X 和 Y 的 LCS 长度</p>
<p>b中的对角线即为公共子序列</p>
</li>
</ul>
<p><a href="https://segmentfault.com/p/1210000009610313/read" target="_blank" rel="noopener">参考 git diff myers 算法</a></p>
</li>
</ul>
<h2 id="智力题"><a href="#智力题" class="headerlink" title="智力题"></a>智力题</h2><h4 id="腾讯微信支付-1"><a href="#腾讯微信支付-1" class="headerlink" title="腾讯微信支付"></a>腾讯微信支付</h4><ul>
<li><p>跑马</p>
<p>25匹马，5条赛道，如何判断出马跑的先后顺序</p>
<blockquote>
<p>锦标赛排序</p>
</blockquote>
</li>
<li><p>千字文</p>
<p>皇帝要找出一篇一千个字的文章里面有没有重复的字，最快方法？（可以使用皇帝能用的任何资源）</p>
</li>
</ul>
<h4 id="腾讯文档"><a href="#腾讯文档" class="headerlink" title="腾讯文档"></a>腾讯文档</h4><ul>
<li><p>100 个乒乓球，甲乙一次可以拿一到五个，甲先拿的话怎么能最后一个拿完？</p>
<p>100÷6=16……4<br>甲先拿4个，以后的拿法为：乙拿x个，1≤x≤5，则甲拿6-x个<br>乙拿一次甲拿一次算一轮的话，每轮都会减少6个球。<br>所以最后一轮会剩下6个，无论乙拿几个甲都会拿到最后1个</p>
</li>
<li><p>一个 5L 和 3L 的杯子，如何倒出 4L 水</p>
<p>1+3，3L 倒两次进 5L，剩余 1L，然后再加 3L 即可</p>
<p>5-1，5l 装满后倒入3l，剩余 2L，把这 2L 水倒入 3L，此时 3L 杯子只差 1L，再将 5L 装满后将 3L 倒满，即可</p>
</li>
</ul>
<h4 id="字节跳动"><a href="#字节跳动" class="headerlink" title="字节跳动"></a>字节跳动</h4><ul>
<li><p>抛不规则硬币，正面朝上概览0.7，反面朝上概率0.3，两个人拿这种硬币打赌，如何让两个人获胜的概率都为 0.5（只抛一次）</p>
<p>用两枚这种硬币</p>
</li>
</ul>
<h2 id="算法题"><a href="#算法题" class="headerlink" title="算法题"></a>算法题</h2><ul>
<li><p>10亿数中找出前1000大的数据：用最小堆（降序），先取出 1001 个数，构建最小堆，堆顶永远是最小的数，从剩余的数中一次取一个，和最小堆堆顶相比，如果小则丢弃，否则更新堆顶并调整最小堆。10亿个数全部操作完之后，抛开堆顶，剩下的 1000 个数就是最大的 1000 个</p>
</li>
<li><p>随机排座位算法（要有连坐功能）</p>
</li>
<li><p>2.5亿个整数，只有一个数出现两次，其余全部出现一次，如何找到它？（可以用hash。相同的两个数hash之后一定在一块的，就可以放到相同的文件中，然后再对每个小文件进行分析。不懂？）</p>
</li>
<li><p>一个长度为n-1 的递增排序数组中的所有数字都是唯一的，并且每个数字都在范围 0~n-1 之内，在范围 0~n-1之内的 n 个数字中有且只有一个数字不在该数组中，请找出这个数字。<br>数组求和。将这个数组求和后，与从1累加到n-1的结果比较，两者之差就是所求的数字</p>
</li>
<li><p>什么是时间复杂度和空间复杂度</p>
<ul>
<li><p>时间复杂度：</p>
<p>计算时间复杂度的具体步骤：</p>
<ul>
<li><strong>找出算法中的基本语句</strong>。算法中执行次数最多的那条语句就是基本语句，通常是最内层循环的循环体</li>
<li><strong>执行基本语句执行次数的数量级</strong>。即只要保证基本语句执行次数的最高次幂正确即可，可以忽略所有低次幂和最高次幂的稀疏</li>
<li><strong>用O表示算法的时间性能</strong>。如果算法中包含嵌套的循环，则基本语句通常是最内层的循环体，如果算法包含并列的循环，则将并列循环的时间复杂度相加</li>
</ul>
</li>
<li><p>空间复杂度：辅助变量所占用的空间，包括递归、栈所需的空间</p>
</li>
</ul>
</li>
</ul>
<h3 id="排序算法"><a href="#排序算法" class="headerlink" title="排序算法"></a>排序算法</h3><p>详情见 <a href="https://huangrenhao.gitee.io/2020/09/24/algorithm-sort/">排序算法</a></p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2020/09/24/browser-interview/" rel="next" title="前端面试总结 browser 部分">
                <i class="fa fa-chevron-left"></i> 前端面试总结 browser 部分
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2020/09/24/webpack-interview/" rel="prev" title="前端面试总结 webpack 部分">
                前端面试总结 webpack 部分 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
    </div>
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">renhao</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">94</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">19</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#简述对前端工程化的理解（300字以内）"><span class="nav-number">1.</span> <span class="nav-text">简述对前端工程化的理解（300字以内）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是函数式编程"><span class="nav-number">2.</span> <span class="nav-text">什么是函数式编程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#前端最近几年的新技术，前端前沿技术"><span class="nav-number">3.</span> <span class="nav-text">前端最近几年的新技术，前端前沿技术</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#多人开发配合的注意"><span class="nav-number">4.</span> <span class="nav-text">多人开发配合的注意</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#设计模式了解哪些"><span class="nav-number">5.</span> <span class="nav-text">设计模式了解哪些</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#发布-订阅和观察者模式的区别？"><span class="nav-number">6.</span> <span class="nav-text">发布/订阅和观察者模式的区别？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何实现关键词浮动框，-如鼠标移动到特定文字上，需要显示详细信息的对话框浮动在文字上方"><span class="nav-number">7.</span> <span class="nav-text">如何实现关键词浮动框， 如鼠标移动到特定文字上，需要显示详细信息的对话框浮动在文字上方</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何看待互联网寒冬？对自己的职业生涯规划和技术规划（未来几年的期望）？"><span class="nav-number">8.</span> <span class="nav-text">如何看待互联网寒冬？对自己的职业生涯规划和技术规划（未来几年的期望）？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#前端有使用过-哪些数据结构"><span class="nav-number">9.</span> <span class="nav-text">前端有使用过 哪些数据结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#微前端方案"><span class="nav-number">10.</span> <span class="nav-text">微前端方案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Vue-和-原生js、jquery-的区别"><span class="nav-number">11.</span> <span class="nav-text">Vue 和 原生js、jquery 的区别</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#作为一个前端工程师应该掌握哪些技术"><span class="nav-number">12.</span> <span class="nav-text">作为一个前端工程师应该掌握哪些技术</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#服务端渲染"><span class="nav-number">13.</span> <span class="nav-text">服务端渲染</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#请简述一下你在前端不同方向-WebGL、小程序、WebAssembly、跨端等-所做的技术尝试（300字以内）"><span class="nav-number">14.</span> <span class="nav-text">请简述一下你在前端不同方向(WebGL、小程序、WebAssembly、跨端等)所做的技术尝试（300字以内）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#git-命令"><span class="nav-number">15.</span> <span class="nav-text">git 命令</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#怎么做需求分析"><span class="nav-number">16.</span> <span class="nav-text">怎么做需求分析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对前端架构的理解"><span class="nav-number">17.</span> <span class="nav-text">对前端架构的理解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#尾递归调用优化"><span class="nav-number">18.</span> <span class="nav-text">尾递归调用优化</span></a></li></ol><li class="nav-item nav-level-2"><a class="nav-link" href="#场景题"><span class="nav-number"></span> <span class="nav-text">场景题</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#腾讯微信支付"><span class="nav-number">0.1.</span> <span class="nav-text">腾讯微信支付</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#网易有道"><span class="nav-number">0.2.</span> <span class="nav-text">网易有道</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#智力题"><span class="nav-number"></span> <span class="nav-text">智力题</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#腾讯微信支付-1"><span class="nav-number">0.1.</span> <span class="nav-text">腾讯微信支付</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#腾讯文档"><span class="nav-number">0.2.</span> <span class="nav-text">腾讯文档</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#字节跳动"><span class="nav-number">0.3.</span> <span class="nav-text">字节跳动</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#算法题"><span class="nav-number"></span> <span class="nav-text">算法题</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#排序算法"><span class="nav-number">1.</span> <span class="nav-text">排序算法</span></a></li></ol></li></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">renhao</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">265.9k</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  










  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: false,
        notify: false,
        appId: '2P1xqUWiCoNm14MH4yhURlJi-gzGzoHsz',
        appKey: 'uJN0uagHIVgXtBO1OuLV9Ban',
        placeholder: 'Just go go',
        avatar:'mm',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>



  





  

  

  

  
  

  

  

  

</body>
</html>
